<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin:20px 20px 0 20px;">
        <el-button type="primary" @click="showAdd" size="mini">添加</el-button>
      </el-col>
    </el-row>
    <div class="menuList">
      <el-table
      :data="dataSource"
      style="width: 100%"
      stripe
      >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"  v-if="props.row.children.length>0" inline class="demo-table-expand">
              <el-table :data="props.row.children" style="width: 100%">
                <el-table-column prop="id"  min-width="100"></el-table-column>
                <el-table-column prop="name" min-width="100" ></el-table-column>
                <el-table-column prop="icon" min-width="100"></el-table-column>
                <el-table-column prop="url" min-width="100"></el-table-column>
                <el-table-column prop="path" min-width="100"></el-table-column>
                <el-table-column  prop="permission" min-width="100"></el-table-column>
                <el-table-column min-width="300">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button
                        size="mini"
                        @click="delConfirm(scope.$index, scope.row)"   type="default" icon="el-icon-delete" >删除</el-button>
                        <el-button
                        size="mini"
                        @click="showUpdate(scope.$index, scope.row)"  type="default" icon="el-icon-edit">修改</el-button>
                    </el-button-group>
                  </template>
              </el-table-column>
              </el-table>
          </el-form>
        </template>
      </el-table-column>
        <el-table-column
        min-width="100"
          label="导航code"
          prop="id"
         >
        </el-table-column>
      <el-table-column
      min-width="100"
        label="导航名称"
        prop="name"
       >
      </el-table-column>
      <el-table-column
      min-width="100"
        label="图标"
        prop="icon"
        >
      </el-table-column>
      <el-table-column
      min-width="100"
        label="url"
        prop="url"
        >
      </el-table-column>
      <el-table-column
      min-width="100"
        label="path"
        prop="path"
        >
      </el-table-column>
      <el-table-column
       min-width="100"
        label="权限"
        prop="permission"
       >
      </el-table-column>
      <el-table-column  label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              size="mini"
              @click="delConfirm(scope.$index, scope.row)" icon="el-icon-delete" > 删除</el-button>
            <el-button
              size="mini"
              @click="showUpdate(scope.$index, scope.row)" icon="el-icon-edit">修改</el-button>
            </el-button-group>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <!--update-->
   <el-dialog title="导航编辑" :before-close="clearAddFrom" width="500px" :close-on-click-modal="false" :visible.sync="updateBox">
    <el-form :model="updateForm">
      <el-form-item label="导航code" required label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.id" :disabled="true" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="导航名称" required label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="导航等级" required label-width="80px">
        <el-select size="mini"  style="width:300px;" v-model= "menuxiala.value" @change="stateDj" placeholder="请选择导航等级">
          <el-option label="一级导航" key="一级导航" value="一级导航"></el-option>
          <el-option label="下级导航" key="下级导航" value="下级导航"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="父导航" label-width="80px" required v-if="menuxiala.value==='下级导航'">
        <el-select size="mini"  style="width:300px;" v-model="updateForm.parentId"  placeholder="请选择父导航">
          <el-option
            v-for="item in dataSource"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="角色" required label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.permission" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="导航地址" label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.url" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="path" label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.path" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="导航图标" label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.icon" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="导航顺序" label-width="80px">
        <el-input size="mini"  style="width:300px;" v-model="updateForm.seq" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clearAddFrom" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="update">确 定</el-button>
    </div>
  </el-dialog>
    <!--add-->
    <el-dialog title="添加导航" :before-close="clearAddFrom" width="500px" :close-on-click-modal="false" :visible.sync="addBox">
      <el-form :model="addForm">
        <el-form-item label="导航code" required label-width="80px">
          <el-input size="mini" style="width:300px;" v-model="addForm.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="导航名称" required label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="导航等级" required label-width="80px">
          <el-select size="mini"  style="width:300px;" v-model= "menuxiala.value"  @change="stateDj" placeholder="请选择导航等级">
            <el-option label="一级导航" key="一级导航" value="一级导航"></el-option>
            <el-option label="下级导航" key="下级导航" value="下级导航"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父导航" required label-width="80px" v-if="menuxiala.value==='下级导航'">
          <el-select size="mini"  style="width:300px;" v-model="addForm.parentId"  placeholder="请选择父导航">
            <el-option
              v-for="item in dataSource"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" required label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.permission" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="导航地址" label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="path" label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.path" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="导航图标" label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.icon" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="导航顺序" label-width="80px">
          <el-input size="mini"  style="width:300px;" v-model="addForm.seq" auto-complete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAddFrom" size="mini">取 消</el-button>
        <el-button type="primary" @click="add" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'menuTree',
  data () {
    return {
      dataSource: [
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "dashboard",
          "icon": "sy",
          "name": "首页",
          "resourceType": "menu",
          "url": "",
          "path": "",
          "permission": "dashboard",
          "parentId": "0",
          "seq": 1,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "dashboard1",
            "icon": "sy",
            "name": "HOME",
            "resourceType": "menu",
            "url": "",
            "path": "dashboard",
            "permission": "dashboard",
            "parentId": "dashboard",
            "seq": 1,
            "children": null
          }]
        },
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "certificate",
          "icon": "form",
          "name": "小说管理",
          "resourceType": "menu",
          "url": "certificate",
          "path": "/certificate",
          "permission": "certificate",
          "parentId": "0",
          "seq": 7,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "createCertificate",
            "icon": "form",
            "name": "审核管理",
            "resourceType": "menu",
            "url": "certificate/createCertificate",
            "path": "createCertificate",
            "permission": "certificate",
            "parentId": "certificate",
            "seq": 1,
            "children": null
          },
          {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "createCertificate",
            "icon": "form",
            "name": "小说资源管理",
            "resourceType": "menu",
            "url": "certificate/createCertificate",
            "path": "createCertificate",
            "permission": "certificate",
            "parentId": "certificate",
            "seq": 1,
            "children": null
          }]
        },
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "activity",
          "icon": "home",
          "name": "客户端管理",
          "resourceType": "menu",
          "url": "/activity",
          "path": "/activity",
          "permission": "activity",
          "parentId": "0",
          "seq": 10,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "makeActivity",
            "icon": "make",
            "name": "用户管理",
            "resourceType": "menu",
            "url": "activity/makeList",
            "path": "makeActivity",
            "permission": "activity:makeList",
            "parentId": "activity",
            "seq": 1,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "activityList",
            "icon": "parameter",
            "name": "评论管理",
            "resourceType": "menu",
            "url": "/activity/list",
            "path": "activityList",
            "permission": "activity:list",
            "parentId": "activity",
            "seq": 2,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "auditActivity",
            "icon": "table",
            "name": "书单管理",
            "resourceType": "menu",
            "url": null,
            "path": "auditActivity",
            "permission": "activity:auditList",
            "parentId": "activity",
            "seq": 10,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "activityHistory",
            "icon": "example",
            "name": "推广管理",
            "resourceType": "menu",
            "url": "",
            "path": "historyActivity",
            "permission": "activity:historyList",
            "parentId": "activity",
            "seq": 20,
            "children": null
          },
          {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "activityHistory",
            "icon": "example",
            "name": "d导航管理",
            "resourceType": "menu",
            "url": "",
            "path": "historyActivity",
            "permission": "activity:historyList",
            "parentId": "activity",
            "seq": 20,
            "children": null
          },
          {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "activityHistory",
            "icon": "example",
            "name": "指导管理",
            "resourceType": "menu",
            "url": "",
            "path": "historyActivity",
            "permission": "activity:historyList",
            "parentId": "activity",
            "seq": 20,
            "children": null
          },
          {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "activityHistory",
            "icon": "example",
            "name": "基本管理",
            "resourceType": "menu",
            "url": "",
            "path": "historyActivity",
            "permission": "activity:historyList",
            "parentId": "activity",
            "seq": 20,
            "children": null
          }]
        },
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "works",
          "icon": "zp",
          "name": "签约管理",
          "resourceType": "menu",
          "url": "/works",
          "path": "/works",
          "permission": "works",
          "parentId": "0",
          "seq": 20,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "program",
            "icon": "star",
            "name": "待签约管理",
            "resourceType": "menu",
            "url": "/works/program",
            "path": "program",
            "permission": "program:list",
            "parentId": "works",
            "seq": 1,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "artisticWork",
            "icon": "example",
            "name": "已签约管理",
            "resourceType": "menu",
            "url": "/works/artisticWork",
            "path": "artisticWork",
            "permission": "artisticWork:list",
            "parentId": "works",
            "seq": 2,
            "children": null
          }]
        },
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "worksAudit",
          "icon": "sp",
          "name": "签到系统",
          "resourceType": "menu",
          "url": "/works/audit",
          "path": "/works/audit",
          "permission": "worksAudit",
          "parentId": "0",
          "seq": 30,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "programAudit",
            "icon": "system",
            "name": "代金卷管理",
            "resourceType": "menu",
            "url": "works/program/auditList",
            "path": "program",
            "permission": "program:auditList",
            "parentId": "worksAudit",
            "seq": 1,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "artisticWorkAudit",
            "icon": "system",
            "name": "规则管理",
            "resourceType": "menu",
            "url": "works/artisticWork/auditList",
            "path": "artisticWork",
            "permission": "artisticWork:auditList",
            "parentId": "worksAudit",
            "seq": 2,
            "children": null
          }]
        },
        {
          "ids": null,
          "createName": null,
          "createDate": null,
          "updateName": null,
          "updateDate": null,
          "page": 1,
          "limit": 30,
          "sort": "createDate",
          "order": "desc",
          "id": "member",
          "icon": "cy",
          "name": "系统管理",
          "resourceType": "menu",
          "url": "/member",
          "path": "/member",
          "permission": "member",
          "parentId": "0",
          "seq": 80,
          "children": [{
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "contestant",
            "icon": "student",
            "name": "用户管理",
            "resourceType": "menu",
            "url": "/member/contestant",
            "path": "contestant",
            "permission": "contestant:list",
            "parentId": "member",
            "seq": 1,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "teacher",
            "icon": "teacher",
            "name": "数据字典",
            "resourceType": "menu",
            "url": "/member/teacher",
            "path": "teacher",
            "permission": "teacher:list",
            "parentId": "member",
            "seq": 2,
            "children": null
          }, {
            "ids": null,
            "createName": null,
            "createDate": null,
            "updateName": null,
            "updateDate": null,
            "page": 1,
            "limit": 30,
            "sort": "createDate",
            "order": "desc",
            "id": "unit",
            "icon": "unit",
            "name": "导航管理",
            "resourceType": "menu",
            "url": "/member/unit",
            "path": "unit",
            "permission": "unit:list",
            "parentId": "member",
            "seq": 3,
            "children": null
          }]
        }
      ],
      updateBox:false,
      addBox:false,
      menuxiala:{
        value:''
      },
      updateForm: {
        id:'',
        name:'',
        resourceType:'menu',
        permission:'',
        icon:'',
        url:'',
        path:'',
        parentId:'',
        seq:'',
      },
      addForm: {
        id:'',
        name:'',
        resourceType:'menu',
        permission:'',
        icon:'',
        url:'',
        path:'',
        parentId:'',
        seq:'',
      },
    }
  },
  created(){
    // this.getList()
  },
  methods: {
    expand(row, event, column){
      console.log(row.index)
    },
    getList(){

    },
    delConfirm(index,row){
      this.$confirm('此操作将永久删除该导航, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var formData={
          id:row.id
        }

      })
    },
    stateDj(value){//下拉等级修改
      if(value==="一级导航"){
        this.addForm.parentId="";
        this.updateForm.parentId="";
      }
    },
    showUpdate(index,row){
      this.updateBox=true;
      if(row.parentId==0){
        this.menuxiala.value='一级导航';
      }else{
        this.menuxiala.value='下级导航';
      }
      this.updateForm.name=row.name;
      this.updateForm.resourceType=row.resourceType;
      this.updateForm.id=row.id;
      this.updateForm.permission=row.permission;
      this.updateForm.icon=row.icon;
      this.updateForm.url=row.url;
      this.updateForm.path=row.path;
      this.updateForm.parentId=row.parentId;
      this.updateForm.seq=row.seq;
    },
    showAdd(){
      this.menuxiala.value='';
      this.addBox=true;
    },
    add(){
      if(this.menuxiala.value=='一级导航'){
        this.addForm.parentId = 0;
      }
      var formData={
        id : this.addForm.id,
        name:this.addForm.name,
        resourceType:this.addForm.resourceType,
        permission:this.addForm.permission,
        icon:this.addForm.icon,
        url:this.addForm.url,
        path:this.addForm.path,
        parentId:this.addForm.parentId,
        seq:this.addForm.seq,
      }
    },
    update(){
      if(this.menuxiala.value=='一级导航'){
        this.addForm.parentId = 0;
      }
      var formData={
        id:this.updateForm.id,
        name:this.updateForm.name,
        resourceType:this.updateForm.resourceType,
        permission:this.updateForm.permission,
        icon:this.updateForm.icon,
        url:this.updateForm.url,
        path:this.updateForm.path,
        parentId:this.updateForm.parentId,
        seq:this.updateForm.seq,
      }
    },
    clearAddFrom (){
      this.addBox=false;
      this.updateBox=false;
      this.updateForm.id=null;
      this.updateForm.name=null;
      this.updateForm.permission=null;
      this.updateForm.icon=null;
      this.updateForm.url=null;
      this.updateForm.path=null;
      this.updateForm.parentId=null;
      this.updateForm.seq=null;
      this.addForm.id=null;
      this.addForm.name=null;
      this.addForm.permission=null;
      this.addForm.icon=null;
      this.addForm.url=null;
      this.addForm.path=null;
      this.addForm.parentId=null;
      this.addForm.seq=null;

    },
    closeButtonFromDialog (){
      this.btnAddBox=false;
      this.btnUpdateBox=false;
      this.updateBtnForm.id=null;
      this.updateBtnForm.name=null;
      this.updateBtnForm.permission=null;
      this.updateBtnForm.seq=null;
      this.addBtnForm.id=null;
      this.addBtnForm.name=null;
      this.addBtnForm.permission=null;
      this.addBtnForm.seq=null;
    },
  }
}
</script>
<style scoped>
ul{padding:0;}
li{
  list-style:none;

}
</style>
